<template>
  <div class="page-box">
    <!-- 头部区域 -->
    <tool-bar>
      <el-form :inline="true" size="small">
        <el-form-item label="用户名">
            <el-input v-model.trim="query.username"
                      placeholder="请输入用户名"
                      clearable
                      @clear="initData"></el-input>
          </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model.trim="query.mobile"
                      placeholder="请输入手机号"
                      clearable
                      @clear="initData"></el-input>
          </el-form-item>
          <el-form-item label="性别">
              <el-select clearable v-model="query.sex"  @clear="initData">
                <el-option label="男" :value="0"></el-option>
                <el-option label="女" :value="1"></el-option>
              </el-select>
            </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchSubmit"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="searchCancel"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </tool-bar>

    <!-- 自定义表格组件 -->
    <custom-table
      title="会员"
      :btn-list="['export']"
      :list="list"
      @refresh="refreshListData"
      show-index
      :columns="columnsData"
      :loading="loading"
    >

    <!-- 左侧自定义按钮 -->
    <template #btnbox>
      <el-button
            size="mini"
            plain
            type="primary"
            icon="el-icon-plus"
            @click="$refs.vinfo.isShow=true"
               v-permission="'ydd_user@add'"
            >{{ $t("base.add") }}</el-button>
    </template>

      <!-- 头像列 -->
      <template slot="icon" slot-scope="scope">
        <img style="height:50px;" :src="showImage(scope.row.icon)" alt="">
      </template>
      <!-- 性別列 -->
      <template slot="sex" slot-scope="scope">
        <el-tag type="paimary" v-if="scope.row.sex*1===0">男</el-tag>
        <el-tag type="success" v-else>女</el-tag>
      </template>

      <!-- 操作列 -->
      <template slot="action" slot-scope="scope">
        <el-button
          @click="edit({ ...scope.row })"
          icon="el-icon-edit"
          type="primary"
          circle
          size="small"
            v-permission="'ydd_user@update'"
        ></el-button>
        <el-button
          @click="del(scope.row.id)"
          type="danger"
          icon="el-icon-delete"
          circle
           v-permission="'ydd_user@del'"
          size="small"
        ></el-button>
      </template>
    </custom-table>

    <!-- 分页组件 -->
    <Pagination
      :total="total"
      :page.sync="page"
      :page-sizes="pageSizes"
      :limit.sync="limit"
      @pagination="paginationChange"
    />

    <!--  用户添加/修改 -->
    <v-info ref="vinfo" @update-list="initData"></v-info>
  </div>
</template>

<script>
import vInfo from './components/info'
import { getListData, delData } from '@/api/user/user'
import list from '@/mixins/list'
// 默认查询参数
const defaultQuery = {
  sex: '',
  username: '',
  mobile: ''
}
export default {
  name: 'userIndex',
  components: {
    vInfo
  },
  data () {
    return {
      // 查询参数
      query: { ...defaultQuery },
      // 表格显示数据
      columnsData: [
        { prop: 'id', label: '用户ID' },
        { prop: 'username', label: '用户名' },
        { prop: 'mobile', label: '手机号' },
        { prop: 'icon', label: '用户头像', template: 'icon' },
        { prop: 'sex', label: '性別', template: 'sex' },
        { prop: 'birthday', label: '出生年月' }
      ]
    }
  },
  mixins: [list],
  methods: {
    // 初始化数据
    async initData () {
      try {
        this.loading = true
        const { query, page, limit } = this
        const { data, count } = await getListData({ ...query, page, limit })
        this.list = data
        this.total = count
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    // 显示图片
    showImage (pic) {
      if (pic && pic.startsWith('http')) {
        return pic
      } else if (pic && pic.startsWith('upload/')) {
        return process.env.VUE_APP_WEB_URL + pic
      } else {
        return ''
      }
    },
    // 搜索提交
    searchSubmit () {
      this.page = 1
      this.initData()
    },
    // 搜索重置
    searchCancel () {
      this.page = 1
      this.query = { ...defaultQuery }
      this.initData()
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'))
        await delData({ id })
        this.$message.success(this.$t('base.delSuccessText'))
        this.initData()
      } catch (e) {
        return this.$message.info(this.$t('base.cancelText'))
      }
    }
  }
}
</script>
<style scoped></style>
